<template>
	<div class="inOutyewuyear" ref='inOutyewuyear'>
		<h2 class="titleSelf">跨境电商进出口业务单量年度走势</h2>
		<div class="contentSelf">
			<div ref="inOutyewuyearChart" class="inOutyewuyearChart"></div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'inOutyewuyear',
		components: {

		},
		data() {
			return {

			}
		},
		mounted() {
			var that = this;
			that.getEchartData()
			setInterval(function() {
				that.getEchartData()
			}, 30000)
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取当前日期that.commonFunction.formatDate() 
			// 获取明天that.commonFunction.getTomorrowDate();

			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 
			getEchartData() {
				const inOutyewuyearChart = this.$refs.inOutyewuyearChart;
				if (inOutyewuyearChart) {
					const myChart = this.$echarts.init(inOutyewuyearChart)
					var that = this;
					var startDate = that.commonFunction.formatDate()[0] - 6;
					var endDate = that.commonFunction.formatDate()[0];

					that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							start: "2015",
							// start:startDate,
							end: endDate,
							dtype: "Y"
						}
					}).then(function(data0) {
						if (data0.status == "200") {
							var dataYear = [];
							var dataValue = [];
							var dataArr = data0.data.result.hn_business_trends;
							console.log(dataArr)
							dataArr.forEach(function(dd) {
								dataYear.push(dd.REPORTDATE);
								dataValue.push(dd.AMOUNT / 10000);
								// dataValue.push(0)
							});
							// console.log(dataYear);
							// console.log(dataValue);
							const dataSet = [];

							dataSet[0] = dataYear;
							dataSet[1] = dataValue;
							
							console.log(dataSet[1])

							// console.log(dataSet);

							// const dataSet = [
							// 	['2017', '2018', '2019', '2020', '2021'],
							// 	[120, 200, 150, 80, 70]
							// ];

							const option = {
								grid: {
									left: '12%',
									top: '20%',
									bottom: '20%',
									right: '10%'
								},
								legend: {
									show: true,
									icon: "plain",
									top: "top",
									right: "10%",
									orient: 'vertical',
									itemWidth: that.commonFunction.fontSize(0.2),
									itemHeight: that.commonFunction.fontSize(0.1),
									itemGap: that.commonFunction.fontSize(0.1),
									textStyle: {
										color: '#fff',
										fontSize: that.commonFunction.fontSize(0.12),
									}


								},
								xAxis: {
									type: 'category',
									axisLine: {
										show: false,
									},
									axisTick: {
										show: false,
									},
									axisLabel: {
										color: '#c1c90f',
										fontSize: that.commonFunction.fontSize(0.12),
									},
									splitLine: {
										show: false,
									},
									data: dataSet[0],
								},
								yAxis: {
									name: "单量(万包)",
									nameTextStyle: {
										color: '#c1c90f',
										fontSize: that.commonFunction.fontSize(0.12),
									},
									type: 'value',
									axisLine: {
										show: false,
									},
									axisTick: {
										show: false,
									},
									axisLabel: {
										color: '#c1c90f',
										fontSize: that.commonFunction.fontSize(0.12),
									},
									splitLine: {
										show: false,
										lineStyle: {
											type: 'dashed',
											color: 'rgba(190,201,15,1)',
											width: 1,
										},
									},
								},
								series: [{
										name: '单量',
										data:dataSet[1] ,
										type: 'pictorialBar',
										symbol: 'rect',
										barWidth: that.commonFunction.fontSize(0.3),
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
													offset: 0,
													color: 'rgba(193,201,15,.8)' //  0%  处的颜色
												},
												{
													offset: 1,
													color: 'rgba(193,201,15,.2)' //  100%  处的颜色
												}
											],
											global: false //  缺省为  false
										},
									},
									{
										data: dataSet[1],
										type: 'bar',
										barWidth: that.commonFunction.fontSize(0.3),
										itemStyle: {
											color: 'transparent',

											borderWidth: 1,
											borderColor: new that.$echarts.graphic.LinearGradient(
												0, 0, 0, 1,
												[{
														offset: 0,
														color: 'rgba(193,201,15,.8)'
													},
													{
														offset: 1,
														color: 'rgba(193,201,15,.2)'
													},
												]
											),
											shadowColor: 'blue',
											shadowBlur: 12,
											shadowOffsetX: 0,
											shadowOffsetY: 0,
										},
									},
								],
							};
							myChart.setOption(option)
							window.addEventListener("resize", function() {
								myChart.resize()
							})

						} else {
							alert("数据请求错误")
						}

					}).catch(function(error) {
						alert(error)
					});

				}
			}
		}
	}
</script>

<style scoped>
	.inOutyewuyear {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.inOutyewuyearChart {
		width: 100%;
		height: 100%;
		background: url(../../../../static/img/wangge.png) no-repeat;
	}
</style>
